<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<link rel="stylesheet" type="text/css" href="../css/mui.min.css" />
		<link href="../css/all.css" rel="stylesheet" type="text/css">
		<style type="text/css">
			.mui-bar {
				color: #FFFFFF;
				font-size: 15px;
			}
			
			.mui-media-body-left {
				padding-left: 10px;
			}
			
			.mui-orderinfo {
				padding-top: 10px;
			}
			
			.mui-row-left {
				padding-left: 30px;
			}
			
			.span-right {
				padding-right: 10px;
			}
			
			.mui-bar-tab .mui-table-view {
				background: #000000;
				opacity: 0.7;
			}
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav own-header-hidden own-main-background-color">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left own-left-nav-color"></a>
			<h1 class="mui-title">订单详情</h1>
		</header>
		<div class="mui-content mui-row mui-fullscreen" id="orderinfo">
			<span class="mui-loader">数据加载中.....</span>
		</div>
		<div id="bar">
			<nav class="mui-bar mui-bar-tab">
				<div class="mui-pull-left" style=" width:75%; height:50px; ">
					<ul class="mui-table-view">
						<li class="mui-table-view-cell mui-media">
							<span class="mui-media-object mui-pull-left">
									<div  class="mui-switch mui-switch-mini mui-active mui-pull-left">
							        <div class="mui-switch-handle"></div>
						           </div>
								</span>
							<div class="mui-media-body">
								合计 : ￥231.90
								<p class="mui-ellipsis mui-h6">总额 : ￥241.90 立减 : ￥10.0</p>
							</div>
						</li>
					</ul>
				</div>
				<div id="jiesuan" class="mui-pull-right bgcoloe-red" style=" width:25%; height:50px; line-height:50px; text-align: center;">
					<span style=" text-align: center; vertical-align: middle;">结算</span>
				</div>
			</nav>
		</div>
		<script type="text/javascript" src="../js/mui.min.js"></script>
		<script type="text/javascript">
			mui.init({
				swipeBack: false
			})
			var orderinfo = document.getElementById("orderinfo");
			mui.plusReady(function() {
					setTimeout(function() {
						//加载所有的选中的商品
						orderinfo.innerHTML = "";
						var order1 = localStorage.getItem("order");
						mui.each(JSON.parse(order1), function(index, item) {
							var order_div = document.createElement("div")
							order_div.classList = "mui-orderinfo";
							order_div.innerHTML = '<div class="mui-orderinfo" >\
					<ul class="mui-table-view" style=" background:#FFFFFF;">\
					<li class="mui-table-view-cell">\
						<a class="mui-navigate-right">\
							<span class="span-right"><input name="checkbox" value="0" type="checkbox"></span><span>乔丹专卖店</span>\
						</a>\
					</li>\
					<li class="mui-table-view-cell">\
					<div class="mui-row">\
							<div class="mui-pull-left">\
							<span class="span-right"><input name="checkbox" value="1" type="checkbox"></span>\
							<img class="" style=" width:80px; height:80px; " src="../k/yf_1.jpg">\
							</div>\
							<div class="mui-media-body mui-media-body-left">\
							    <p class="ellipsis">能和心爱的人一起睡觉，是件幸福的事情；</p>\
								<p class="mui-ellipsis">颜色 黑色<span class="mui-pull-right">尺码 42</span></p>\
								<p class="mui-ellipsis own-red">￥177.00</p>\
							</div>\
							</div>\
							<div class="mui-row mui-row-left">\
						       <div class="mui-numbox">\
								<button class="mui-btn mui-btn-numbox-minus" type="button" >-</button>\
								<input class="mui-input-numbox" type="number" value="1">\
								<button class="mui-btn mui-btn-numbox-plus" type="button">+</button>\
					       </div>\
					       <span class="mui-pull-right mui-h5">延保服务</span>\
						 </div>\
						<div class="mui-row mui-row-left">\
					       <p class="">[赠品]乔丹专卖店<span class="mui-pull-right">x4</span></span>\
						 </div>\
					</li>\
				</ul>\
			  </div>';
							orderinfo.appendChild(order_div)
							document.getElementById("jiesuan").addEventListener("tap",function()
							{
								mui.openWindow({
									url:'../pay/zhifu.html',
									id:'zhifu'
								})
							})
						});
					}, 150)
				})
				//为了防止退出有闪的问题
			mui.back = function() {
				document.getElementById("bar").innerHTML = "";
				setTimeout(function() {
					plus.webview.currentWebview().close("fade-out");
				}, 200)
			}
		</script>
	</body>

</html>